SNS & Shopping
P O L A R O I D
Team . 왕 꿈 트 리
INDEX.HTML
/팀원 소개 및 역할
/01 /사이트 소개 & 개발 목적
/02
/03 /04
/목차
INDEX.HTML
/05 /06
/개발 일정
/개발도구 소개 &
주요기능
/DB & Mind Map 설계
/기능 시연 사진
INDEX.HTML
/01 팀원 소개
Developer : 허성욱
Member & Spring Security & Oauth & SMTP
Developer : 오지석
SNS & Pay & Admin
Developer : 심형철
Live Chatting (STOMP & Sock JS & WebSocket)
Developer : 심은지
Like & Comment script & Web Design
Developer : 고윤성
Shopping mall & Pick & Review
INDEX.HTML
/02 사이트 소개 및 개발목적
최근 Instagram과 같은 SNS 시장이 지속적으로 커짐에 따라 SNS와 Shopping Mall을 결합한
사이트가 있으면 좋겠다고 생각해 해당 프로젝트를 진행함.
SNS 사용자 증가 추이
INDEX.HTML
기능구현
코드병합
테스트&수정
문서작성&
DB설계
약2주
약4주
약1.5주
약2.5주
/03 개발 일정 (총 6주)
INDEX.HTML
/04 DB 설계 (총 15개)
INDEX.HTML
/04 Mind Map
INDEX.HTML
/개발도구 소개 & 주요 기능
/05
INDEX.HTML
/05 개발 도구 및 환경
/ LANGUAGE / IDE / OTHER
●OAuth 2.0을 사용한 Login Service
ㄴ Google, Kakao, Naver, Facebook
●Spring Security를 이용한 User 권한 관리
●E-Mail 인증을 통한 보안 관리
/05 주요 기능
Member
INDEX.HTML
●회원 & SNS 게시물 & Goods 게시글 관리
●회원의 판매자 신청시 판매자 권한부여
Admin
●Pagination을 사용한 Paging 처리
●다중 파일 업로드 및 Review & Pick 기능구현
●I’m port & 카카오결제 API를 이용한 결제기능
●Ajax를 이용한 재고관리
●결제 리스트 건별 관리 및 결제 영수증 출력
/05 주요 기능
Goods (Shopping Mall)
INDEX.HTML
/05 주요 기능
INDEX.HTML
Board (SNS)
●무한 스크롤을 사용해 SNS 게시판 구현
●다중 파일 업로드 및 출력
●좋아요 & 댓글
Chat
●WebSocket을 통해 양방향 통신기능 구현
●STOMP를 이용해 메시지의 유형,형식,내용 정의
●SockJS를 이용해 다양한 브라우저 지원
INDEX.HTML
/기능 시연 & 코드 사진
/06
SNS 및 프로필 사진은 초상권 보호를 위해
이모티콘으로 가린 점 양해 바랍니다.
YOUR LOGO HERE
INDEX.HTML
index.html 화면
YOUR LOGO HERE
INDEX.HTML
join.html 화면
YOUR LOGO HERE
INDEX.HTML
회원가입 DB 화면
회원가입 시 DB에 저장되는 데이터 사진입니다.
Spring Security로 아이디 및 비밀번호를 암호화처리된 정보로 저장했고,
역할을 지정해 접근 가능 역할이 아닐 시 Interceptor 처리되게 했습니다.
YOUR LOGO HERE
INDEX.HTML
접근 불가 화면
YOUR LOGO HERE
INDEX.HTML
login.html 화면
YOUR LOGO HERE
INDEX.HTML
addInfo.html 화면
YOUR LOGO HERE
INDEX.HTML
lostPassword.html 화면
YOUR LOGO HERE
INDEX.HTML
board/main.html 화면
YOUR LOGO HERE
INDEX.HTML
board/main.html 화면
YOUR LOGO HERE
INDEX.HTML
board/save.html 화면
YOUR LOGO HERE
INDEX.HTML
board/findById.html 화면
YOUR LOGO HERE
INDEX.HTML
board/update.html 화면
YOUR LOGO HERE
INDEX.HTML
board/update.html 화면
YOUR LOGO HERE
INDEX.HTML
board/findById.html 화면
YOUR LOGO HERE
INDEX.HTML
게시글 삭제 작동 사진
YOUR LOGO HERE
INDEX.HTML
board/search.html 화면
YOUR LOGO HERE
INDEX.HTML
board/update.html 화면
YOUR LOGO HERE
INDEX.HTML
다중 사진 출력 화면
YOUR LOGO HERE
INDEX.HTML
다중 사진 출력 화면
YOUR LOGO HERE
INDEX.HTML
member/myPage.html 화면
YOUR LOGO HERE
INDEX.HTML
팔로우 시스템 구현 화면
YOUR LOGO HERE
INDEX.HTML
팔로우 시스템 구현 화면
YOUR LOGO HERE
INDEX.HTML
판매자 권한 신청 화면
YOUR LOGO HERE
INDEX.HTML
Index.html (admin) 화면
YOUR LOGO HERE
INDEX.HTML
admin/sellerList.html 화면
YOUR LOGO HERE
INDEX.HTML
판매자 권한이 있는 사용자 화면
YOUR LOGO HERE
INDEX.HTML
실시간 채팅 화면 화면
YOUR LOGO HERE
INDEX.HTML
안읽은 채팅이 있을 시 헤더 화면
YOUR LOGO HERE
INDEX.HTML
채팅방 화면
YOUR LOGO HERE
INDEX.HTML
실시간 채팅 테스트 화면
YOUR LOGO HERE
INDEX.HTML
admin/memberList.html 화면
YOUR LOGO HERE
INDEX.HTML
admin/boardList.html 화면
YOUR LOGO HERE
INDEX.HTML
Admin 게시글 삭제 (좌측하단) 화면
YOUR LOGO HERE
INDEX.HTML
admin/goodsList.html 화면
YOUR LOGO HERE
INDEX.HTML
Admin 판매글 삭제 (좌측하단) 화면
YOUR LOGO HERE
INDEX.HTML
goods/paging.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/paging.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/save.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/myList.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/findById.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/findById.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/findById.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/findById.html 화면
YOUR LOGO HERE
INDEX.HTML
Kakaopay 결제 화면
YOUR LOGO HERE
INDEX.HTML
결제 성공 화면
YOUR LOGO HERE
INDEX.HTML
goods/paySuccess.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/payList.html 화면
YOUR LOGO HERE
INDEX.HTML
재고 없을시 품절 화면
YOUR LOGO HERE
INDEX.HTML
품절시 findById.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/update.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/search.html 화면
YOUR LOGO HERE
INDEX.HTML
goods/search.html 화면
INDEX.HTML
Thank You.